<template>
  <view class="content">
    <view class="phone">
      <view class="phone_input">
        <input
          v-model="input_phone"
          type="number"
          placeholder="请输入对方账户"
        />
      </view>
    </view>

    <view class="price">
      <text v-if="transfertype == 1">转账积分</text>
      <text v-else>转账金额<text class="price_fee">（手续费：0.3%）</text></text>
      <view class="price_input">
        <text>￥</text>
        <input
          v-model="input_price"
          type="digit"
          :placeholder="placeholdertext"
          style="flex: 1"
        />
      </view>
    </view>

    <view class="noticeLine">请仔细核对您的转账账户，转账完成无法撤回。</view>

    <view class="fixed">
      <view class="fixed_button" @click="handleTransfer">确定转账</view>
    </view>

    <u-popup
      v-model="show_transaction"
      mode="center"
      width="490rpx"
      height="290rpx"
      :border-radius="24"
      :closeable="true"
      :mask-close-able="false"
      @close="operation_password = ''"
    >
      <view class="Transaction_eject">
        <text class="Transaction_top">输入交易密码</text>
        <input
          type="password"
          value=""
          class="Transaction_center"
          v-model="operation_password"
        />
        <text class="Transaction_bottom" @click="transactionComfirm">确定</text>
      </view>
    </u-popup>
  </view>
</template>

<script>
import api from "../../api/api";
import tip from "@/utils/tip.js";
export default {
  data() {
    return {
      input_price: "",
      input_phone: "",
      shopDetail: {},
      show_transaction: false,
      operation_password: "",
      coin_balance: 0,
      transfertype:0,
      placeholdertext:'请输入转账金额'
    };
  },
  onLoad(options){
    this.transfertype = options.type??0
    this.transfertype==1?this.placeholdertext = '请输入转账积分':''
  },
  onShow() {
    this.getuserWallet();
  },
  methods: {
    async getuserWallet() {
      //   let res = await api.userWallet({
      //     method: "get",
      //     query: {},
      //     loading: "加载中",
      //   });
      //   if (res.code === 0) {
      //     this.shopDetail = res.data;
      //     this.coin_balance = this.shopDetail.lock_balance;
      //   } else {
      //     tip.defaults(res.msg);
      //   }
    },

    transactionComfirm() {
      if (this.operation_password == "") {
        tip.defaults("请输入交易密码");
      } else {
        if(this.transfertype == 1) {
          this.handtransferWcPoint()
          return
        }
        this.handleTransfer();
      }
    },
    async handtransferWcPoint(){
      let res = await api.transferWcPoint({
        query: {
          account: this.input_phone,
          point: this.input_price,
          operation_password: this.operation_password,
        },
        loading: "加载中",
        method: "post",
      });
      if(res.code == 0){
        this.operation_password = null
        this.show_transaction = false
        tip.defaults('转账成功');
      }else{
        tip.defaults(res.msg);
      }
    },

    async handleTransfer() {
      if (!this.input_phone) {
        tip.defaults("请输入对方账户");
        return;
      }
      if (!/^1[3456789]\d{9}$/.test(this.input_phone)) {
        tip.defaults("请输入正确的手机号");
        return;
      }
      if(this.transfertype == 1){
        if (!this.input_price) {
          tip.defaults("请输入转账积分");
          return;
        }
        if (this.input_price <= 0) {
          tip.defaults("转账积分必须大于0");
          return;
        }
        if (!this.operation_password) {
          this.show_transaction = true;
          return;
        }
        return
      }
      if (!this.input_price) {
        tip.defaults("请输入转账金额");
        return;
      }
      //   if (this.input_price > Number(this.coin_balance)) {
      //     tip.defaults("转账金额不能大于钱包余额");
      //     return;
      //   }

      // 打开就需要输入交易密码
      // if (!this.operation_password) {
      //   this.show_transaction = true;
      //   return;
      // }
      // this.show_transaction = false;

      let res = await api.sdTransfer({
        query: {
          account: this.input_phone,
          transfer_money: this.input_price,
          operation_password: this.operation_password,
        },
        method: "post",
      });

      this.show_transaction = false;
      this.operation_password = "";
      if (res.code == 0) {
        // tip.defaults("转账成功");
        // #ifdef H5
        if (res.data.pay_url) {
          window.location.href = res.data.pay_url;
        }
        // #endif
        // #ifdef APP-PLUS
        if (res.data.pay_url) {
          plus.runtime.openURL(res.data.pay_url);
        }
        // #endif
        return;
      } else {
        tip.defaults(res.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.content {
  padding: 20rpx 30rpx 100rpx 30rpx;
  background: $bg-color1;

  //   min-height: 100vh;
  min-height: calc(100vh - 44px);
}
.price {
  margin-top: 30rpx;
  width: 100%;
  background: $bg-color3;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text {
    margin: 30rpx;
    color: $text-color1;
    font-size: 16px;
  }
  .price_fee {
    margin-left: 12rpx;
    height: 34rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #1fe7e7;
    line-height: 34rpx;
  }
  .price_input {
    display: flex;
    align-content: flex-start;
    input {
      height: 120rpx;
      line-height: 120rpx;
      color: $text-color1;
    }
    // border-bottom: 2rpx solid #313535;
    text {
      font-size: 22px;
      font-weight: 500;
    }
  }
}
.phone {
  //   margin-top: 30rpx;
  padding: 0 30rpx;
  width: 100%;
  background: $bg-color3;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .phone_input {
    height: 100rpx;
    display: flex;
    align-content: flex-start;
    input {
      width: 100%;
      height: 100rpx;
      line-height: 120rpx;
      color: $text-color1;
    }
    text {
      font-size: 22px;
      font-weight: 500;
    }
  }
}
.noticeLine {
  margin-top: 40rpx;
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 40rpx;
}
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  width: 750rpx;
  height: 130rpx;
  background: #292b2b;
  &_button {
    width: 670rpx;
    height: 90rpx;
    margin: 20rpx auto 0;
    background: $button;
    background-repeat: no-repeat;
    background-size: 100%;

    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 90rpx;
    text-align: center;
  }
}
.Transaction_eject {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 290rpx;
  background-color: $bg-color1;
  .Transaction_top {
    margin-top: 50rpx;
    font-size: 32rpx;
    color: $text-color1;
  }
  .Transaction_center {
    padding: 0 20rpx;
    border: 2rpx solid #262934;
    background: $bg-color3;
    border-radius: 16rpx;
    height: 85rpx;
    width: 80%;
    color: #ffffff;
  }
  .Transaction_bottom {
    font-size: 32rpx;
    color: $text-color1;
    margin-bottom: 30rpx;
  }
}
</style>